<template>
  <a-card title="图书列表" style="width: 70%; margin:20px auto; ">
    <template #extra>
      <a-button type="primary" @click="this.$router.push('/book/bookadd')">添加</a-button>
    </template>
    <a-table :columns="columns" :data-source="data">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'name'">
          {{ record.name }}
        </template>

        <template v-else-if="column.key === 'action'">
        <span>
          <a-button style="margin-right: 10px" type="primary">编辑</a-button>
          <a-button type="primary" danger>删除</a-button>
        </span>
        </template>
        <!--        <template>-->
        <!--          <div>-->
        <!--            <a-input-->
        <!--              v-if="editableData[record.id]"-->
        <!--              v-model:value="editableData[record.id][column.dataIndex]"-->
        <!--              style="margin: -5px 0"-->
        <!--            />-->
        <!--            <template>-->
        <!--              aa-->
        <!--            </template>-->
        <!--          </div>-->
        <!--        </template>-->
      </template>
    </a-table>
  </a-card>
</template>
<script lang="ts" setup>
import {SmileOutlined, DownOutlined} from '@ant-design/icons-vue';
import {defineComponent, reactive, ref, UnwrapRef} from 'vue';
import {cloneDeep} from "lodash-es";


interface DataItem {
  id: string;
  name: string;
  category: string;
  price: number | undefined;
  publish_time: string;
}

const data: DataItem = [
  {
    id: '1',
    name: 'PHP从入门到精通',
    category: 'PHP',
    price: '50.00',
    publish_time: '2019-02-17',
  },
  {
    id: '2',
    name: 'PHP自学宝典',
    category: 'PHP',
    price: '50.00',
    publish_time: '2019-02-17',
  },
  {
    id: '3',
    name: 'PHP从入门到精通',
    category: 'PHP',
    price: '50.00',
    publish_time: '2019-02-17',
  },
  {
    id: '4',
    name: 'PHP从入门到精通',
    category: 'PHP',
    price: '50.00',
    publish_time: '2019-02-17',
  },
];
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: '5%',
  },
  {
    title: '图书名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '分类',
    dataIndex: 'category',
    key: 'category',
  },
  {
    title: '价格',
    dataIndex: 'price',
    key: 'price',
  }, {
    title: '出版日期',
    dataIndex: 'publish_time',
    key: 'publish_time',
  },
  {
    title: '操作',
    key: 'action',
  },
];
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({});
const dataSource = ref(data);
const edit = (id: string) => {
  editableData[id] = cloneDeep(dataSource.value.filter(item => id === item.id)[0]);
};
const save = (id: string) => {
  Object.assign(dataSource.value.filter(item => id === item.id)[0], editableData[id]);
  delete editableData[id];
};
const cancel = (id: string) => {
  delete editableData[id];
};


</script>

